import { reqGetAllMajorByPage } from "@/api/reqMajor";
import type { Major, MajorData } from "@/types/major";
import { onMounted, ref, watch, watchEffect } from "vue";

export const useShowAllMajor = () => {
  const nowPageRef = ref(1);
  const changeRef = ref(Symbol());
  const totalMajorRef = ref(0);
  const sizeRef = ref(5);
  const majorListRef = ref<Major[]>([]);

  const getAllMajorByPage = async (form: MajorData) => {
    const {
      status,
      data: { total, data },
    } = await reqGetAllMajorByPage({
      page: nowPageRef.value,
      size: sizeRef.value,
    });

    console.log(data);

    if (status === 0) {
      totalMajorRef.value = total as number;
      majorListRef.value = data;
    }
  };

  watch([changeRef], () => {
    getAllMajorByPage({
      page: nowPageRef.value,
      size: sizeRef.value,
    });
  });
  watchEffect(() => {
    getAllMajorByPage({
      page: nowPageRef.value,
      size: sizeRef.value,
    });
  });

  return {
    nowPageRef,
    totalMajorRef,
    sizeRef,
    majorListRef,
    getAllMajorByPage,
    changeRef,
  };
};
